<template>
  <div>
    <div class="dr_content">
      <ZwSearchForm row-num="3" :option="searchOption" @search="search" @reset="reset" />
      <ZwTable ref="tableRef" class="table-box" :option="tableOption" :fetch-params="state.searchParams" :rowKey="getRowKey" :fetch-api="conversionList"> </ZwTable>
    </div>
    <ClubDrewList :clubopen="clubopen" :rowid="id" :title="title" @close="close"></ClubDrewList>
  </div>
</template>
<script lang="tsx" setup>
  import { ref, reactive, computed, inject, onMounted } from 'vue'
  import { ElButton } from 'element-plus'
  import { useRouter } from 'vue-router'
  import ZwTable from '@/components/zw/table/Table'
  import ZwSearchForm from '@/components/zw/search-form/SearchForm'
  import { getClubLevel, conversionList } from '@/api/customer/clubManage/commonSea'
  import { deepCopy } from '@/utils/helper'
  import ClubDrewList from './ClubDrewList.vue'
  const router = useRouter()
  const emit = defineEmits(['close'])
  const tableRef = ref<HTMLElement | null>(null)
  const rowid = inject('rowid')
  const defaultParams = {
    clue_seas_id: rowid.value,
    clue_type: 3 //线索类型：1未转化，2已转化，3已放弃
  }
  const id = ref(null) //行线索id
  let title = ref('') //流转记录抽屉标题
  const clubopen = ref(false) //流转记录抽屉是否打开
  const state = reactive({
    searchParams: deepCopy(defaultParams)
  })
  const getRowKey = (row: any) => {
    return row.id
  }
  const searchOption = computed(() => {
    return [
      {
        label: '执行员工',
        name: 'work_user_list',
        value: [],
        type: 'select',
        placeholder: '请选择执行员工',
        multiple: true,
        popperClass: 'zw-hide_select_option',
        isUserSelect: true,
        formatOption: (v: any) => ({
          label: v.name,
          value: v.id
        })
      },
      {
        label: '线索等级',
        name: 'clue_level_id',
        value: '',
        type: 'select',
        placeholder: '请选择线索等级',
        fetchOptionApi: () => {
          return new Promise((resolve) => {
            getClubLevel({ page: 1, page_size: 99 }).then((res: any) => {
              let levelid: any = []
              res.data.forEach((item: any) => {
                console.log(item)
                levelid.push(item)
                resolve(levelid)
              })
            })
          })
        },
        formatOption: (v: any) => ({
          label: v.name,
          value: v.id
        })
      }
    ]
  })
  let tableOption = [
    {
      type: 'selection',
      width: 55,
      fixed: 'left',
      reserveSelection: true
    },
    {
      prop: 'mobile',
      label: '手机号',
      width: 160
    },
    {
      prop: 'clue_name',
      label: '线索名称',
      showOverflowTooltip: true,
      width: 140
    },
    {
      prop: 'clue_level_name',
      label: '线索等级',
      width: 160
    },
    {
      prop: 'operation_msg',
      label: '放弃原因',
      showOverflowTooltip: true,
      width: 140
    },
    {
      prop: 'operation_time',
      label: '放弃时间',
      width: 220
    },
    {
      prop: 'operation_user_name',
      label: '执行人'
    },
    {
      prop: 'operate',
      label: '操作',
      width: 200,
      fixed: 'right',
      isOperate: true,
      renderOperate({ row }) {
        return (
          <>
            <ElButton
              size="small"
              class="table-button"
              onClick={() => {
                id.value = row.id
                title.value = `【${row.clue_name}】的转化客户`
                clubopen.value = true
              }}
            >
              流转记录
            </ElButton>
          </>
        )
      }
    }
  ]
  const fetch = async () => {
    // 获取文件列表
    return conversionList
  }
  const close = () => {
    emit('close')
  }

  //查询
  const search = (v) => {
    tableRef.value.getTable().clearSelection()
    state.searchParams = v
  }
  //清空
  const reset = () => {
    tableRef.value.getTable().clearSelection()
    state.searchParams = deepCopy(defaultParams)
  }

  onMounted(() => {
    tableRef.value.getTable().clearSelection()
  })
</script>
<style scoped lang="scss">
  .content {
    padding: 16px 0;
  }
  .table-button {
    padding: 0;
  }
</style>
